<template>
	<view class="viewAsText">
		<view class="site"></view>
		<view class="nav">
			<view class="nav-left">
				<view class="nav-left-inc" @click="back"></view>
				<image :src="this.note.profilePicture" class="nav-left-photo" mode=""></image>
				<text class="nav-left-text">{{this.note.username}}</text>
			</view>
			<view class="nav-right">
				<view class="nav-right-button" @click="attention" v-if="show">关注</view>
				<view class="nav-right-button on" v-else @click="attention">已关注</view>
				<view class="nav-right-inc"></view>
			</view>
		</view>
		<view class="content">
			<u-swiper :list="list1" @change="change" @click="click" :autoplay="false" :indicator="true"
				indicatorActiveColor="#f72647" height="1000rpx" imgMode="aspectFit" bgColor="#fff"
				indicatorInactiveColor="gainsboro"></u-swiper>
			<h1 class="content-h1">{{this.note.title}}</h1>
			<text>{{this.note.content}}</text>
			<view class="labels">
				<text>#{{this.note.name}}</text>
			</view>
			<view class="content-time">
				<text>{{formatDate(note.createdAt)}}</text> <text>{{this.note.address}}</text> </text>
			</view>
		</view>
		<view class="line">
			<u-line color="#bdbdbd" length="90%"></u-line>
		</view>


		<view class="enshrine">
			<view class="enshrineNum">
				<text>共{{num}}评论</text>
			</view>
			<view class="enshrine-photo">
				<view class="enshrine-photo-left">
					<image :src="this.note.profilePicture" class="nav-left-photo" mode="" v-if="mediaType"></image>
					<video :src="item.url" :controls="false" :show-center-play-btn="false" object-fit="cover"
						v-else></video>
				</view>
				<view class="enshrine-photo-right">
					<view class="enshrine-photo-right-wenben">
						<text class="wenben" @click="showKeyboard">让大家听听你的声音</text>
					</view>
					<view class="enshrine-photo-right-icn">
						<text class="fuhao juli"></text>
						<text class="ic juli"></text>
						<text class="tup juli"></text>
					</view>
				</view>
			</view>
			<view class="enshrineContent" v-for="(item,index) in remark" :key="index">
				<view class="enshrineContent-photo">
					<image :src="item.profilePicture" class="nav-left-photo" mode=""></image>
				</view>
				<view class="enshrineContent-text">
					<text>{{item.username}}</text>
					<view class="enshrineContent-text-word">
						<text>{{item.content}}</text>
						<text>{{ formatDate(item.createdTime) }}</text>
						<text style="color: #4a67c7;">回复</text>
					</view>
					<view class="enshrineContent" v-for="(e,d) in item.replies" :key="d">
						<view class="enshrineContent-photo">
							<image :src="e.profilePicture" class="nav-left-photo" mode=""></image>
						</view>
						<view class="enshrineContent-text">
							<text>{{e.username}}</text>
							<view class="enshrineContent-text-word">
								<text class="enshrineContent-text-word-1">{{e.content}}</text>
								<text>{{ formatDate(item.createdTime) }}</text>

								<text style="color: #4a67c7;">回复</text>
							</view>
							<view class="unfold">
								<text v-if="unfold" @click="open">展开条回复</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="site">

		</view>
		<view class="bottom">
			<view class="bottom-left">
				<view class="enshrine-photo-right kuan">
					<view class="enshrine-photo-right-wenben">
						<input type="text" placeholder="请输入内容" v-model="value" ref="myInput" />
					</view>
				</view>
			</view>
			<view class="bottom-right">
				<view class="fas" @click="publish">发送</view>
				<text class="bai-aixin" @click="link" v-if="love"></text>
				<text class="hong-aixin" @click="link" v-else></text>
				<text>{{note.likeNum}}</text>
				<text class="bai-enshrine" @click="collect" v-if="enshrine"></text>
				<text class="huang-enshrine" @click="collect" v-else></text>
				<text>{{note.collectNum}}</text>
				<text class="pinlun"></text>
				<text>{{num}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: true,
				love: true,
				enshrine: true,
				value: "",
				unfold: false,
				post: {
					postId: null,
					userId: null,
					postUserId: null
				},
				userId: null,
				note: {},
				remark: [

				],
				list1: [

				],
				prefixIconStyle: {
					fontSize: "45rpx"
				},
				mediaType: null,
				num: null
			}
		},
		onLoad(e) {
			// 路由传值 第一个页面中传值的时候 `页面的url路径?字段名=${值}`
			// 第二个页面进行接收的时候是  在onLoad里面使用形参进行接收
			console.log(e);
			this.post.postId = Number(e.postId)
			this.mediaType = e.mediaType
			this.post.userId = uni.getStorageSync("id")
			this.post.postUserId = Number(e.followeeId)
			this.request("/posts/getposts", "post", {
				userId: this.post.userId,
				postId: this.post.postId,
				followeeId: this.post.postUserId
			}).then(
				(res) => {
					this.note = res.data.result;
					this.list1.length = 0;
					this.list1.push(res.data.result.url);
					if (res.data.result.like == true) {
						this.love = false;
						this.note.likeNum = this.note.likeNum + 1;
					}
					if (res.data.result.collect == true) {
						this.enshrine = false;
						this.note.collectNum = this.note.collectNum + 1;
					}
					if (res.data.result.follow == true) {
						this.show = false;
					}
				}).catch((err) => {
				console.log(err);
			});
			this.request("/posts/getcomments", "get", {
				postId: this.post.postId
			}).then(
				(res) => {
					this.remark = res.data.result
				}
			).catch((err) => {
				console.log();
			});
			this.request("/posts/getcommentscount", "get", {
				postId: this.post.postId
			}).then(
				(res) => {
					console.log(res);
					this.num = res.data.result
				}
			).catch((err) => {
				console.log();
			});
			this.request(`/api/follow/getFollowees?follower=${this.post.userId }&followeeId=${this.post.postUserId}`,
				"post").then(
				(res) => {
					console.log(res.data.message);
					if (res.data.message === "true") {
						this.show = false;
					}
				}
			)
		},
		methods: {
			attention() {
				this.userId = uni.getStorageSync('id');
				if (this.show == true) {
					this.request(`/api/follow/follow?follower=${this.userId}&followeeId=${this.note.userId}`, "post")
						.then((res) => {
							console.log(res);
							this.show = !this.show;
						}).catch((err) => {
							console.log(err);
						});
				} else if (this.show == false) {
					this.request(`/api/follow/unfollow?follower=${this.userId}&followeeId=${this.note.userId}`, "post")
						.then((res) => {
							console.log(res);
							this.show = !this.show;
						}).catch((err) => {
							console.log(err);
						});
				}
			},
			link() {
				this.love = !this.love;
				if (this.love == false) {
					this.request(`/like/goLike?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`, "post")
						.then((res) => {
							console.log(res);
							this.note.likeNum++;
						}).catch((err) => {
							console.log(err);
						});

				} else if (this.love == true) {
					this.request(`/like/delLike?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`, "delete")
						.then((res) => {
							console.log(res);
							this.note.likeNum--;
						}).catch((err) => {
							console.log(err);
						});

				}
			},
			collect() {
				this.enshrine = !this.enshrine;
				if (this.enshrine == false) {
					this.request(`/api/collections/collect?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`,
							"post")
						.then((res) => {
							console.log(res);
							this.note.collectNum++;
						}).catch((err) => {
							console.log(err);
						});

				} else if (this.enshrine == true) {
					this.request(
							`/api/collections/uncollect?postId=${this.post.postId}&userId=${uni.getStorageSync("id")}`,
							"post")
						.then((res) => {
							console.log(res);
							this.note.collectNum--;
						}).catch((err) => {
							console.log(err);
						});

				}
			},
			publish() {
				
				this.request("/comment/insertcomment", "post", {
					postId : this.note.postId,
					userId : uni.getStorageSync("id"),
					content : this.value
				}).then((res) => {
					console.log(res);
					this.request("/posts/getcomments", "get", {
						postId: this.post.postId
					}).then(
						(res) => {
							this.remark = res.data.result
						}
					).catch((err) => {
						console.log();
					});
					this.value = "";
				}).catch((err) => {
							console.log(err);
				})
			},
			formatDate(dateString) {
				return dateString.slice(0, 10);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			open() {
				if (this.remarkShow < this.remark.replies.length - 1) {
					this.remarkShow++;
				}
			},
			showKeyboard() {
				uni.showKeyboard({
					success: function() {
						console.log('键盘已显示');
					},
					fail: function(err) {
						console.error('键盘显示失败：', err);
					}
				})
			}
		}
	}
</script>
<style scoped>
	.unfold {
		color: #2e639c;
	}

	.enshrineContent-text-word {
		display: flex;
		flex-direction: column;
	}

	.enshrineContent-text-word-1 {
		width: 200rpx;
		word-break: break-all;
	}

	.enshrineContent {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 60rpx;
	}

	.enshrineContent-photo {
		margin: 0 30rpx;
	}

	.site {
		width: 100%;
		height: 120rpx;
	}

	.nav {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-evenly;
		background-color: white;
		position: fixed;
		top: 0;
		z-index: 200;
	}

	.nav-left {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.nav-left-inc::before {
		font-family: "iconfont" !important;
		content: "\e64e";
		font-size: 60rpx;
	}

	.nav-left-photo {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.nav-left-text {
		font-size: 35rpx;
	}

	.nav-right {
		width: 40%;
		height: 100%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.nav-right-button {
		width: 50%;
		height: 50%;
		background-color: #fff;
		color: #ff2442;
		border: 1px solid #ff2442;
		border-radius: 32rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 58rpx;
	}

	.on {
		border-color: gainsboro;
		color: gainsboro;
	}

	.nav-right-inc::before {
		font-family: "iconfont" !important;
		content: "\e624";
		font-size: 50rpx;
	}

	.content {
		margin: 0 30rpx;
		display: flex;
		flex-direction: column;
	}

	.content-h1 {
		font-size: 60rpx;
	}

	.labels {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		color: #2e639c;
		margin: 30rpx 0;
	}

	.line {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}

	.bottom {
		width: 100%;
		height: 90rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		z-index: 200;
		display: flex;
		justify-content: space-evenly;
	}

	.bottom-left-input {
		background-color: #f4f4f4;
	}

	.bottom-right {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.bai-aixin::before {
		font-family: "iconfont" !important;
		content: "\e8ab";
		font-size: 60rpx;
	}

	.hong-aixin::before {
		font-family: "iconfont" !important;
		content: "\e85c";
		color: #ff2442;
		font-size: 60rpx;
	}

	.bai-enshrine::before {
		font-family: "iconfont" !important;
		content: "\e8b9";
		font-size: 60rpx;
	}

	.huang-enshrine::before {
		font-family: "iconfont" !important;
		content: "\e8c6";
		font-size: 60rpx;
		color: #ffc107;
	}

	.pinlun::before {
		font-family: "iconfont" !important;
		content: "\e60a";
		font-size: 60rpx;
	}

	.enshrine {
		margin: 50rpx 20rpx;
		display: flex;
		flex-direction: column;
	}

	.enshrine-photo {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.enshrine-photo-right {
		width: 80%;
		height: 80rpx;
		border-radius: 36rpx;
		text-indent: 2rem;
		background-color: #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		color: #b4b4b4;
	}

	.fuhao::after {
		font-family: "iconfont" !important;
		content: "\e704";
		font-size: 55rpx;
	}

	.ic::after {
		font-family: "iconfont" !important;
		content: "\e63f";
		font-size: 55rpx;
	}

	.tup::before {
		font-family: "iconfont" !important;
		content: "\e8ba";
		font-size: 55rpx;
	}

	.juli {
		margin-left: 20rpx;
	}

	.enshrine-photo-right-icn {
		text-indent: 0;
	}
</style>